<template> 
			 <el-card class="box-card">
				<template #header> 
					<div :span="18"><strong>管理员账户管理</strong>  </div>    
					<el-text> 权限说明：管理员具有本机构最高权限,主管理员可以设置子管理员账户</el-text>    
				</template>  
				<div class="padding">   
						<strong>主管理员：</strong> 
						<mdp-select-user show-style="tag" displayLoad v-model="mainBranchAdmUserid" :disabled="true"/> 
						<el-text>主管理员账号与机构号一致 登录账号：{{mainBranchAdmUserid}}</el-text>

				</div>
				<div class="padding">   
					<strong>子管理员：</strong>
						<mdp-select-user relative width="100%" displayLoad :multiple="true" v-model="branchAdmUserids" @change2="onUserSelect"/>  
				</div>
			</el-card>  
</template>

<script>
	import util from '@/components/mdp-ui/js/util';//全局公共库import {
import {	listUser,setUsersToBranchAdm,
	delUser,
	batchDelUser,
	resetPasswordByAdmin
	} from "../../../../api/mdp/sys/user"; 
	import { mapState } from 'pinia'
import { useUserStore } from '@/store/modules/user'    
	export default {

	    computed: {
		    ...mapState(useUserStore,[
		      'userInfo'
		    ]), 
		},
		props:[ ],
		watch: { 
	    },	
		data() { 
			return { 
				branchAdmUserids:[],//机构管理员列表
				oldBranchAdmUserids:[],
				mainBranchAdmUserid:'',
				/**end 在上面加自定义变量**/
			}//end return
		},//end data
		methods: {
			// 取消按钮点击 父组件监听@cancel="addFormVisible=false" 监听
			handleCancel:function(){
				this.$emit('cancel');
			},
			 
			getUsers(){ 
				var params={branchId:this.userInfo.branchId,memType:'1'}
				listUser(params).then(res => {
					var tips = res.tips;
					
					if (tips.isOk) { 
						this.branchAdmUserids = res.data.map(k=>k.userid);
						this.oldBranchAdmUserids=[...this.branchAdmUserids]
					} else {
						this.$message({ message: tips.msg, type: "error" });
					}
					this.load.list = false;
				})
				.catch(() => {
					this.load.list = false; 
				});
			}, 
			onUserSelect(users){  
					setUsersToBranchAdm(users.map(i=>i.userid)).then(res=>{
					var tips = res.tips;  
					if(tips.isOk){
						this.getUsers(); 
					}else{
						this.branchAdmUserids=[...this.oldBranchAdmUserids]
					}

					this.$message({ message: tips.msg, type: tips.isOk?'success':'error' }); 
				});
				} 

		},//end method
		components: {    
		},
		mounted() { 
			this.getUsers();
			this.mainBranchAdmUserid=this.userInfo.branchId
			
		}//end mounted
	}

</script>

<style lang="scss" scoped>
.box-card{
	height: 800px;
	overflow: auto;
}
.avatar-container {
    height: 50px;
    display: flex;
    align-items: center;
    .avatar-wrapper {
        cursor: pointer;
        display: flex;
        flex-direction: row;
        align-items: center;
        .user-avatar {
            height: 34px;
            width: 34px;
            border-radius: 50%;
            margin-right: 12px;
        }
        .username{
            color: #7D7D7D;
            font-size: 18px;
            margin-right: 2px;
        }
        .caret-bottom {
            font-size: 22px;
        }
    }
}
</style>